import React from 'react';
import { Avatar as AntdAvatar } from 'antd';
import type { AvatarProps as AntdAvatarProps } from 'antd';
import { createStyles } from 'antd-style';

export interface AvatarProps extends AntdAvatarProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  avatar: css`
    background-color: ${token.colorPrimary};
  `,
}));

const AvatarComponent: React.FC<AvatarProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const avatarClassName = cx(
    className,
    customClassName,
    styles.avatar
  );

  return <AntdAvatar className={avatarClassName} {...restProps} />;
};

const Avatar = Object.assign(AvatarComponent, {
  Group: AntdAvatar.Group,
});

export { Avatar };
export default Avatar;

